<script setup>
import { Search } from '@element-plus/icons-vue'
import { GetListDetailAPI } from '@/api/material/common'
import Converter from '@/components/XiaoheComponents/order/converter'
const { proxy } = getCurrentInstance()

// 封装 方法 字典查询
const {
  subcontracting_order_type // 委外类型
} = proxy.useDict('subcontracting_order_type')

const props = defineProps({
  data: {
    type: Object,
    default: {}
  },
  // 是否禁用
  db: {
    type: Boolean,
    default: false
  }
})

const tabs = ref('单据明细')
// 物料弹窗
const materialShow = ref(false)

// bom弹窗
const bomShow = ref(false)

// 加工商弹窗
const converterShow = ref(false)

// 表单Ref
const ruleFormRef = ref(null)

// 是否禁用物料
const materialDis = ref(false)

// 表单字段
const ruleForm = reactive({
  converterDict: '', // 加工商名称
  materialDetailList: [] //  warehouseWeight 出库数量
})

// 回显
for (let Key in props.data) {
  ruleForm[Key] = props.data[Key]
}

// 校验
const rules = reactive({
  subcontractingType: [{ required: true, message: '请选择BOM编码', trigger: 'change' }],
  bomCode: [{ required: true, message: '请选择BOM编码', trigger: 'change' }],
  demandTime: [{ required: true, message: '请选择需求时间', trigger: 'change' }],
  subcontractingWeight: [{ required: true, message: '请填写委外数量', trigger: 'change' }]
})
</script>
<template>
  <div class="app-container">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" inline label-width="110px" status-icon>
      <el-form-item label="委外订单号" prop="subcontractingOrderNum">
        <el-input clearable v-model="ruleForm.subcontractingOrderNum" disabled />
      </el-form-item>
      <el-form-item label="委外类型">
        <el-select v-model="ruleForm.subcontractingType" placeholder="请选择委外类型" disabled>
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in subcontracting_order_type"
            :key="index"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="BOM" prop="bomCode" v-if="ruleForm.subcontractingType != '3'">
        <el-input clearable :suffix-icon="Search" v-model="ruleForm.bomCode" disabled @click="bomShow = true" />
      </el-form-item>
      <el-form-item label="关联单号" prop="associatedDocNum">
        <el-input clearable v-model="ruleForm.associatedDocNum" disabled />
      </el-form-item>
      <el-form-item label="物料名称">
        <el-input clearable v-model="ruleForm.materialName" disabled />
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input clearable v-model="ruleForm.specType" disabled />
      </el-form-item>
      <el-form-item label="物料类别">
        <el-input clearable v-model="ruleForm.materialTypeDict" disabled />
      </el-form-item>
      <!-- <el-form-item label="BOM" prop="bomCode">
        <el-input clearable :suffix-icon="Search" v-model="ruleForm.bomCode" disabled @click="bomShow = true" />
      </el-form-item> -->
      <el-form-item label="委外数量 ">
        <el-input clearable v-model="ruleForm.subcontractingWeight" disabled />
      </el-form-item>
      <el-form-item label="需求时间">
        <el-input clearable v-model="ruleForm.demandTime" disabled />
      </el-form-item>
      <el-form-item label="加工商" prop="converterDict">
        <el-input v-model="ruleForm.converterDict" disabled />
      </el-form-item>
      <el-form-item label="委外合同号" prop="subcontractingContractNum">
        <el-input clearable v-model="ruleForm.subcontractingContractNum" disabled />
      </el-form-item>
      <el-form-item label="加工单价">
        <el-input type="number" :min="0" clearable v-model="ruleForm.machiningPrice" disabled />
      </el-form-item>
      <el-form-item label="供应商">
        <el-input clearable v-model="ruleForm.supplierName" disabled />
      </el-form-item>
      <div class="rk">
        <el-form-item label="备注">
          <el-input disabled clearable v-model="ruleForm.remark" :rows="2" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </div>
      <div class="mt20">
        <el-form-item label="合同上传" prop="contractUrl">
          <ImagePreview :src="ruleForm.contractUrl" />
        </el-form-item>
      </div>
    </el-form>
    <el-table stripe border :data="ruleForm.orderMaterialDetailList" style="margin-top: 10px">
      <el-table-column type="selection" width="55" align="center" fixed="left" />
      <el-table-column label="序号" width="70" type="index" />
      <!-- <el-table-column label="类别" prop="materialTypeDict" width="150" /> -->
      <el-table-column label="物料名称" prop="materialName" width="auto" />
      <el-table-column label="物料编码" prop="materialCode" width="auto" />
      <!-- <el-table-column label="物料类别" prop="materialCategoryDict" width="150" /> -->
      <el-table-column label="规格型号" prop="specType" width="auto" />
      <!-- <el-table-column label="占比" prop="bomDetailDosage" width="120" /> -->
      <el-table-column label="库存量" prop="stockNum" width="auto" />
      <el-table-column label="单位" prop="materialUnitDict" width="auto" />
      <!-- <el-table-column label="计算量" prop="需求量" width="120">
        <template #default="{ row }">
          {{ ((ruleForm.subcontractingWeight * (row.bomDetailDosage || 1)) / 100).toFixed(2) }}
        </template>
      </el-table-column> -->
      <el-table-column label="需求量" align="center" width="120">
        <template #default="{ row }">
          <div class="inputClass">
            <el-input
              disabled
              type="number"
              oninput="if(value<=0)value=''"
              clearable
              v-model="row.plannedWeight"
            ></el-input>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 物料弹窗 -->
    <p-XiaoheDialog :dialogVisible="materialShow" title="物料选择" @close="materialShow = false" width="50%">
      <template #body>
        <Material
          :dict="[
            { label: '半成品', value: '3' },
            { label: '成品', value: '4' }
          ]"
          @preservation="materialSelsct"
          @cancel="materialShow = false"
        />
      </template>
    </p-XiaoheDialog>
    <!-- BOM -->
    <p-XiaoheDialog :dialogVisible="bomShow" title="BOM选择" @close="bomShow = false" width="50%">
      <template #body>
        <Bom :bomType="ruleForm.materialType" @preservation="bomSelsct" @cancel="bomShow = false"
      /></template>
    </p-XiaoheDialog>
    <!-- 加工商 -->
    <p-XiaoheDialog :dialogVisible="converterShow" title="加工商" @close="converterShow = false" width="50%">
      <template #body> <Converter @preservation="converterSelsct" @cancel="converterShow = false" /></template>
    </p-XiaoheDialog>
  </div>
</template>

<style scoped>
.app-container {
  width: 100%;
}

.app-container /deep/ .el-input__inner {
  width: 220px !important;
}
.inputClass /deep/ .el-input__inner {
  width: 100px !important;
}
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>
